<template>
    <div class="charge-container">
        <template>
            <el-table :data="vipProductList" border v-loading="loading">
                <el-table-column align="center"
					label="产品图片"
					prop="imageUrl"
					width="130">
					<!-- 插槽作用域 -->
					<template v-slot="{row}">
						<el-avatar shape="square"
							:size="80"
							fit="scale-down"
							:src="row.imageUrl"></el-avatar>
					</template>
				</el-table-column>
                <el-table-column prop="productName"
					align="center"
					label="产品名称">
				</el-table-column>
				<el-table-column prop="description"
					align="center"
					label="产品描述">
				</el-table-column>
				<el-table-column prop="price"
					align="center"
					label="价格(元)">
				</el-table-column>
				<el-table-column prop="inventory"
					align="center"
					label="库存">
				</el-table-column>
                <el-table-column label="操作"
					align="center">
					<template v-slot="{row}">
						<el-button type="primary"
							v-isBuy="row.inventory" 
							@click="pre_order(row)" 
							icon="iconfont icon-vip3" :disabled="row.inventory==0">充值</el-button>
                            
					</template>
				</el-table-column>
            </el-table>
        </template>
    </div>
</template>
<script>
//引入api中的方法
import * as payApi from '@/api/pay'
    export default {
        meta: {
			title: "vipCharge",
			icon: "iconfont icon-chongzhi", //存菜单对应的图标的类名
		},
        data(){
            return {
                vipProductList:[],
                loading:true
            }
        },
        async created(){
            //打开加载动画
            this.loading = true
            //发起请求，获取商品
            let res = await payApi.getVipProduct()
            //console.log(res);
            this.vipProductList = res.data.data
            //关闭加载动画
            this.loading = false
        },
        methods:{
            pre_order(row){
                console.log(row);
                //弹出充值提示
                this.$confirm("您正在充值"+row.description,"购买提示",{
                    type:"info"
                }).then(()=>{
                    //点击确定按钮
                    //1.要把当前的产品对象存到vuex，currentproduct
                    this.$store.commit("SET_CURRENT_PRODUCT", row);
                    //2.跳转到下单页面，preorder
                    this.$router.push({name:"PreOrder"})
                }).catch(()=>{
                    //点击取消按钮
                    this.$message.warning("已取消购买")
                })
            }
        },
        //自定义指令
        directives:{
            "isBuy":{
                inserted(el,binding){
                    //console.log(el,binding);
                    // if(binding.value == 0){
                    //     //库存如果是0，给元素加上is-disabled类名
                    //     //保存元素之前的类名
                    //     let oldClassName = el.className
                    //     el.className = oldClassName + "is-disabled" 
                    //     el.disabled = true     //真正的禁用按钮
                    // }
                }
            }
        }
    }

</script>
<style scoped lang="less">
.el-avatar {
	/deep/ img {
		width: 100%;
	}
	height: 30px !important;
	background-color: #fff;
}
.el-button--primary {
	background-color: #05a000;
}
.el-button--primary.is-disabled, .el-button--primary.is-disabled:active, .el-button--primary.is-disabled:focus, .el-button--primary.is-disabled:hover {
    color: #FFF;
    background-color: #a0cfff;
    border-color: #a0cfff;
}
</style>